<template>
    <div class="my">
        <div class="bgImg">
            <van-uploader
                v-model="fileList"
                :deletable="false"
                :after-read="afterRead"
                :show-upload="isLogon"
            >
                <van-button icon="plus" type="primary"></van-button
            ></van-uploader>
        </div>

        <div class="box">
            <div class="personalDisplay">
                <div
                    class="headPortrait"
                    :style="{
                        backgroundImage: `url(${myData.userImg})`,
                    }"
                ></div>
                <div class="basic">
                    <p class="p1">{{ myData.nickName }}</p>
                    <p class="p2">{{ myData.desc }}</p>
                </div>
            </div>

            <van-cell
                title="个人资料"
                class="cell_1"
                is-link
                :to="isLogon ? 'PersonalData' : 'Logon'"
            />
            <van-cell
                class="cell_2"
                title="我的订单"
                is-link
                :to="isLogon ? 'MyOrder' : 'Logon'"
            />
            <van-cell
                class="cell_3"
                title="我的收藏"
                is-link
                :to="isLogon ? 'MyCollection' : 'Logon'"
            />
            <van-cell
                class="cell_4"
                title="地址列表"
                is-link
                :to="isLogon ? 'AddressList' : 'Logon'"
            />
            <van-cell
                class="cell_5"
                title="安全中心"
                is-link
                :to="isLogon ? 'SecurityCenter' : 'Logon'"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: "My",
    data() {
        return {
            fileList: [{ url: '' }],

            // 我的 基础信息
            myData: {
                desc: "请先登录",
                nickName: "___",
                userBg: "",
                userImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsfy.eway.org.cn%2FImages%2Fblank.png&refer=http%3A%2F%2Fsfy.eway.org.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639469523&t=fd3ae9e684b8f37335f0a217bb33c558'
            },

            // 是否登录
            isLogon: true
        };
    },
    methods: {
        // 获取 我的基础信息
        getFindMy() {
            this.axios({
                method: "GET",
                url: "/findMy"

            }).then((result) => {


                if (result.data.code === 700) {
                    this.isLogon = false;
                    this.fileList = [{ url: 'http://www.kangliuyong.com:10002/assets/coffeeshop_userbg87234976070801821636795946391.jpeg' }];
                }

                if (result.data.code === 'A001') {
                    this.myData = result.data.result[0];
                    // 

                    if (this.myData.desc === '') {
                        this.myData.desc = '这个家伙很懒，什么都没有留下!';
                    }

                    this.fileList[0].url = this.myData.userBg;
                }
            }).catch((err) => {

            });
        },

        // 上传背景图
        afterRead(file) {
            // 此时可以自行将文件上传至服务器

            this.fileList = [];

            let serverBase64Img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
            let imgType = file.file.type.replace(/image\//, '');
            this.axios({
                method: 'POST',
                url: '/updateUserBg',
                data: {
                    imgType,
                    serverBase64Img,
                }

            }).then((result) => {




                if (result.data.code === 'I001') {

                    // 控制背景图展示
                    this.fileList = [{ url: result.data.userBg }];
                    Toast('背景图更新成功');
                }
            }).catch((err) => {


            });
        }
    },
    // 初始化钩子
    created() {
        this.getFindMy();

    },
};
</script>

<style lang="less" scoped>
.my {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    background-color: #f7f7f7;

    .bgImg {
        height: 180px;
        background-color: #fff;

        /deep/ div {
            width: 100%;
            height: 100%;
            margin: 0;
            .van-uploader__input-wrapper {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 20px;
                height: 20px;

                button {
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    border-radius: 50%;
                    color: #ccc;
                    background-color: rgba(255, 255, 255, 0.3);
                    border: 1px solid rgba(90, 90, 90, 0.2);
                }
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .box {
        margin: 0 12px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;

        transform: translateY(-46px);
        .personalDisplay {
            display: flex;
            padding: 15px;
            height: 140px;
            background-color: rgba(255, 255, 255, 0.4);
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 94px;
                left: 0;
                bottom: 0;
                z-index: -1;
                background-color: #ffffff;
            }
            .headPortrait {
                width: 70px;
                height: 70px;
                border-radius: 50%;
                background: no-repeat center center;
                background-size: cover;
            }
            .basic {
                margin-left: 20px;
                flex: 1;
                .p1 {
                    font-weight: 600;
                    font-size: 22px;
                    color: #0c34ba;
                    width: 220px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    margin-top: 8px;
                    margin-bottom: 14px;
                }
                .p2 {
                    font-size: 14px;
                    color: #999;
                }
            }
        }

        /deep/ .van-cell {
            padding: 12px 16px 12px 46px;
            font-weight: 600;

            &.cell_1 {
                background: url('../assets/用户.png') no-repeat 6px 8px #fff;
                background-size: 32px;
            }
            &.cell_2 {
                background: url('../assets/全部订单.png') no-repeat 6px 8px #fff;
                background-size: 32px;
            }
            &.cell_3 {
                background: url('../assets/收藏.png') no-repeat 6px 8px #fff;
                background-size: 32px;
            }
            &.cell_4 {
                background: url('../assets/位置.png') no-repeat 6px 8px #fff;
                background-size: 32px;
            }
            &.cell_5 {
                background: url('../assets/云安全.png') no-repeat 6px 8px #fff;
                background-size: 32px;
            }
        }
    }
}
</style>